<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老年人健康档案服务平台</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="script.js"></script>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>👴</text></svg>">
</head>
<body>
    <!-- 头部区域 -->
    <header>
        <div class="logo">
            <img src="images/logo.png" alt="乐龄健康">
            <h1>东东健康</h1>
        </div>
        <nav>
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="搜索健康资讯...">
                <button onclick="searchXiaohongshu()"><i class="fas fa-search"></i></button>
            </div>
            <ul class="nav-links">
                <li><a href="#home">首页</a></li>
                <li><a href="#health-data">健康档案</a></li>
                <li><a href="#advice">健康建议</a></li>
                <li><a href="#telemedicine">远程医疗</a></li>
                <li><a href="#community">社区互动</a></li>
            </ul>
        </nav>
    </header>

    <!-- 主要内容区域 -->
    <main>
        <!-- 健康数据模块 -->
        <section id="health-data" class="module">
            <h2>健康档案中心</h2>
            <div class="user-selector">
                <label for="familyMember">选择家庭成员：</label>
                <select id="familyMember" onchange="updateSelectedUser()">
                    <option value="">请选择...</option>
                </select>
                <button onclick="showAddUserForm()" class="action-btn add-btn">
                    <i class="fas fa-user-plus"></i> 添加
                </button>
                <button onclick="editCurrentUser()" class="action-btn edit-btn" id="editUserBtn" disabled>
                    <i class="fas fa-edit"></i> 修改
                </button>
            </div>
            <div class="data-cards">
                <div class="card">
                    <i class="fas fa-heartbeat"></i>
                    <h3>体检报告</h3>
                    <button onclick="viewHealthReport()">查看报告</button>
                </div>
                <div class="card">
                    <i class="fas fa-notes-medical"></i>
                    <h3>病史记录</h3>
                    <button onclick="viewMedicalHistory()">查看记录</button>
                </div>
                <div class="card">
                    <i class="fas fa-chart-line"></i>
                    <h3>健康趋势</h3>
                    <button onclick="viewHealthTrends()">查看趋势</button>
                </div>
            </div>
            <div id="healthReportContainer" class="report-container" style="display: none;"></div>
        </section>

        <!-- 健康建议模块 -->
        <section id="advice" class="module">
            <h2>个性化健康建议</h2>
            <div class="advice-container">
                <div class="advice-card">
                    <i class="fas fa-utensils"></i>
                    <h3>饮食建议</h3>
                    <div class="advice-content" id="diet-advice"></div>
                </div>
                <div class="advice-card">
                    <i class="fas fa-running"></i>
                    <h3>运动建议</h3>
                    <div class="advice-content" id="exercise-advice"></div>
                </div>
                <div class="advice-card">
                    <i class="fas fa-brain"></i>
                    <h3>心理健康</h3>
                    <div class="advice-content" id="mental-advice"></div>
                </div>
            </div>
        </section>

        <!-- 远程医疗模块 -->
        <section id="telemedicine" class="module">
            <h2>远程医疗服务</h2>
            <div class="telemedicine-container">
                <div class="function-buttons">
                    <button onclick="startConsultation()" class="function-btn consultation-btn">
                        <i class="fas fa-comment-medical"></i>
                        立即咨询
                    </button>
                    <button onclick="makeAppointment()" class="function-btn appointment-btn">
                        <i class="fas fa-calendar-check"></i>
                        预约挂号
                    </button>
                </div>
            </div>
        </section>

        <!-- 社区互动模块 -->
        <section id="community" class="module">
            <h2>社区活动
                <button onclick="showAddEventForm()" class="action-btn add-btn" style="float: right;">
                    <i class="fas fa-plus"></i> 添加活动
                </button>
            </h2>
            <div class="community-events" id="community-events-container">
                <!-- 动态加载社区活动 -->
            </div>
        </section>

        <!-- 添加/编辑用户的模态框 -->
        <div id="userFormModal" class="modal">
            <div class="modal-content">
                <span class="close-modal" onclick="closeUserForm()">&times;</span>
                <h3 id="modalTitle">添加家庭成员</h3>
                <form id="userForm" onsubmit="handleUserSubmit(event)">
                    <input type="hidden" id="userId">
                    <div class="form-group">
                        <label for="userName">姓名：</label>
                        <input type="text" id="userName" required>
                    </div>
                    <div class="form-group">
                        <label for="userGender">性别：</label>
                        <select id="userGender" required>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="userBirthDate">出生日期：</label>
                        <input type="date" id="userBirthDate" required>
                    </div>
                    <div class="form-group">
                        <label for="userPhone">联系电话：</label>
                        <input type="tel" id="userPhone" pattern="[0-9]{11}">
                    </div>
                    <div class="form-group">
                        <label for="userAddress">家庭住址：</label>
                        <input type="text" id="userAddress">
                    </div>
                    <div class="form-group">
                        <label for="emergencyContact">紧急联系人：</label>
                        <input type="text" id="emergencyContact">
                    </div>
                    <div class="form-group">
                        <label for="emergencyPhone">紧急联系电话：</label>
                        <input type="tel" id="emergencyPhone" pattern="[0-9]{11}">
                    </div>
                    <div class="form-buttons">
                        <button type="submit" class="submit-btn">保存</button>
                        <button type="button" onclick="closeUserForm()" class="cancel-btn">取消</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 添加健康数据编辑模态框 -->
        <div id="healthDataModal" class="modal">
            <div class="modal-content">
                <span class="close-modal" onclick="closeHealthDataModal()">&times;</span>
                <h3 id="healthDataModalTitle">编健康数据</h3>
                <form id="healthDataForm" onsubmit="handleHealthDataSubmit(event)">
                    <input type="hidden" id="healthDataId">
                    <input type="hidden" id="healthDataType">
                    <div id="healthDataFields">
                        <!-- 字段将通过JavaScript动态生成 -->
                    </div>
                    <div class="form-buttons">
                        <button type="submit" class="submit-btn">保存</button>
                        <button type="button" onclick="closeHealthDataModal()" class="cancel-btn">取消</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 添加社区活动编辑模态框 -->
        <div id="eventFormModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 id="eventModalTitle">添加社区活动</h3>
                    <span class="close-modal" onclick="closeEventForm()">&times;</span>
                </div>
                <div class="modal-body">
                    <form id="eventForm" onsubmit="handleEventSubmit(event)">
                        <input type="hidden" id="eventId">
                        <div class="form-group">
                            <label for="eventTitle">活动名称：</label>
                            <input type="text" id="eventTitle" required>
                        </div>
                        <div class="form-group">
                            <label for="eventType">活动类型：</label>
                            <select id="eventType" required>
                                <option value="健康讲座">健康讲座</option>
                                <option value="文化活动">文化活动</option>
                                <option value="体育运动">体育运动</option>
                                <option value="娱乐活动">娱乐活动</option>
                                <option value="志愿服务">志愿服务</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="eventDate">活动日期：</label>
                            <input type="date" id="eventDate" required>
                        </div>
                        <div class="form-group">
                            <label for="eventTime">活动时间：</label>
                            <input type="time" id="eventTime" required>
                        </div>
                        <div class="form-group">
                            <label for="eventLocation">活动地点：</label>
                            <input type="text" id="eventLocation" required>
                        </div>
                        <div class="form-group">
                            <label for="maxParticipants">最大参与人数：</label>
                            <input type="number" id="maxParticipants" min="1" required>
                        </div>
                        <div class="form-group">
                            <label for="eventDescription">活动描述：</label>
                            <textarea id="eventDescription" rows="6" required></textarea>
                        </div>
                        <div class="form-group">
                            <label for="organizer">组织者：</label>
                            <input type="text" id="organizer" required>
                        </div>
                        <div class="form-group">
                            <label for="contactPhone">联系电话：</label>
                            <input type="tel" id="contactPhone" pattern="[0-9]{11}" required>
                        </div>
                        <div class="form-buttons">
                            <button type="submit" class="submit-btn">保存</button>
                            <button type="button" onclick="closeEventForm()" class="cancel-btn">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚区域 -->
    <footer>
        <div class="footer-content">
            <div class="footer-links">
                <h4>友情链接</h4>
                <ul>
                    <li><a href="#">小杰健康委员会</a></li>
                    <li><a href="#">老年健康协会</a></li>
                    <li><a href="#">区服务中心</a></li>
                </ul>
            </div>
            <div class="footer-info">
                <p>版权所有 © 2024 小杰健康服务平台</p>
                <p>地址：惠州市惠城区河南岸街道46号</p>
                <p>联系电话：400-404-1234</p>
            </div>
        </div>
    </footer>

    <!-- 在body末尾添加通用数据显示/编辑模态框 -->
    <div id="dataModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="dataModalTitle"></h3>
                <span class="close-modal" onclick="closeDataModal()">&times;</span>
            </div>
            <div class="modal-body">
                <div id="dataDisplayArea">
                    <!-- 数据显示区域 -->
                </div>
                <div id="dataEditArea" style="display: none;">
                    <!-- 编辑表单区域 -->
                    <form id="dataEditForm" onsubmit="handleDataSubmit(event)">
                        <div id="editFields"></div>
                        <div class="form-buttons">
                            <button type="submit" class="submit-btn">保存</button>
                            <button type="button" onclick="cancelEdit()" class="cancel-btn">取消</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button onclick="toggleEdit()" id="editButton" class="edit-btn">
                    <i class="fas fa-edit"></i> 编辑数据
                </button>
                <button onclick="closeDataModal()" class="close-btn">关闭</button>
            </div>
        </div>
    </div>
</body>
</html> 